:root {
    --spacing: 11px;
    --blur: 5px;
    --base: #ffc600;
}

img {
    padding: var(--spacing);
    background: var(--base);
    filter: blur(var(--blur));
}

.change-color {
    color: var(--base);
}

/*
  misc styles, nothing to do with CSS variables
*/

body {
    text-align: center; /* 使标题、滑动条、图片水平居中 */
    background-color: #193549;
    color: white;
    font-family: 'helvetica neue', sans-serif;
    font-weight: 100;
    font-size: 2em;
}

.controls {
    margin-bottom: 1em; /* 将图片往下推，隔开滑动条与图片 */
}

input {
    width: 100px; /* 滑动条长度 */
}
